<template>
  <div class="like">
    <Card>
      <span> 猜你喜欢 </span>
    </Card>
    <ul>
      <li
        v-for="(item, index) in likeList.data"
        :key="index"
        @click="goDetail(item.id)"
      >
        <div class="img">
          <img v-lazy="item.imgUrl" alt="" />
        </div>
        <h1>{{ item.name }}</h1>
        <span class="price">￥{{ item.price }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { Lazyload } from "mint-ui";
import Card from "@/components/Home/Card.vue";
export default {
  name: "like",
  components: {
    Card,
    Lazyload,
  },
  props: ["likeList"],
  mounted() {},
  data() {
    return {};
  },
  methods: {
    goDetail(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id,
        },
      });
    },
  },
};
</script>

<style scoped>


ul {
  margin-top: 15px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
li {
  height: 190px;
  width: 180px;
  margin-bottom: 10px;
}
.img {
  height: 140px;
  width: 180px;
}
img {
  width: 100%;
  height: 100%;
}

img[lazy="loading"] {
  /* width: 40px;
  height: 300px;
  margin: auto; */
  height: 140px;
  width: 180px;
  margin: auto;
  background: url("@/assets/images/lazyLoad.gif") no-repeat fixed center;
}

h1 {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.price {
  font-size: 19px;
  color: darkred;
}
</style>